<template>
  <div>
    <div class="i-box" style="--h: 3rem;">
      <XmolBox title="Xradar" style="--freeH: 100%">
        <Xradar :indicatorData="indicatorData" :seriesData="seriesData" title="PSY 2.7" class="p10" v-if="showChart"></Xradar>
      </XmolBox>
    </div>

    <section class="content mt10">
      <div>
        <p class="tt">代码示例</p>
        <div v-text='`<Xradar :indicatorData="indicatorData" :seriesData="seriesData" title="PSY 2.7" class="p10" v-if="showChart"></Xradar>`'></div>
      </div>
      <div>
        <p class="tt">indicatorData</p>
        <p><span class="td">数据参考：</span>{{indicatorData}}</p>
      </div>
      <div>
        <p class="tt">seriesData</p>
        <p><span class="td">数据参考：</span>{{seriesData}}</p>
      </div>
      <div>
        <p class="tt">title（中间文字）</p>
        <p><span class="td">数据参考：</span>PSY 2.7</p>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 雷达图
      indicatorData: [
        {name: '配种分娩率(%)', max: 100},
        {name: '断奶成活率(%)', max: 100},
        {name: '窝均产仔数(头)', max: 15},
        {name: '年产胎次(次/年/头)', max: 2.7},
        {name: 'NPD(非生产天数)(天/年/头)', max: 120}],
      seriesData: [],
      xAxis: [],
      showChart: false
    };
  },
  mounted () {
    this.getSeriesData();
  },
  methods: {
    getSeriesData () {
      let res = {
        'status': {'code': 200, 'msg': '服务请求成功'},
        'data': [
          {'indexName': '配种分娩率', 'value': '28.8'},
          {'indexName': '断奶成活率', 'value': '94.9'},
          {'indexName': '窝均产仔数', 'value': '8.0'},
          {'indexName': '胎次', 'value': '1.5'},
          {'indexName': 'NPD(非生产天数)', 'value': '82.2'}
        ]};
      let dealData = this.Common.dealRadarData(res.data || []);
      this.seriesData = dealData.seriesData;
      this.showChart = true;
    }
  }
};
</script>
